<template>
   <div>

     <div class="tb">
      
   <ul>

   <li v-for="(v,i) in arr" :key="i"  @click="fun(i)">
  <img :src="v.img" alt="">
     <p>{{v.name}}</p>

   </li>

   </ul>

     </div>



   </div>

</template>

<script>
export default {
 methods:{
     fun(index) {
   switch (index) {
      case 2:
         this.$router.push("/vip")
         break;
         case 3:
         this.$router.push("/insurance")
         break;
         case 4:
          this.$router.push("/ccs")
        
      
     
 
   }
     console.log(index);
     }
  },
  
    data(){
   return {
      arr:[
        {name:"账户" ,img:"./homes/k1.png"},
        {name:"转账汇款",img:"./homes/k2.png"},
        {name:"优惠活动",img:"./homes/k3.png"},
        {name:"保险",img:"./homes/k5.png"},
        {name:"建荣家园" ,img:"./homes/k1.png"},
        
       
      ]

   }
  }


    }


</script>

<style lang="less" scoped>
   .tb{
    width: 100%;
    height: 0.5rem;
   ul{
    width: 90%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     margin: auto;
 
     
     li{
        width: 20%;
        height: .5rem;
        text-align: center;
        font-size: .12rem;
        
        p{
            font-size:.12rem ;
            line-height: .2rem;
        }
        img{
            width: .25rem;
            height: .25rem;
            align-self: flex-end;
            // margin-top: .15rem;
        }
     }
   }

   }


</style>